<!--
出差费用弹窗
 -->
 <template>
  <u-dialog title="出差预计费用"
    width="44%"
    top="5vh"
    v-bind="$attrs"
    v-on="$listeners"
    custom-class="u-ccfyPeople-dialog clear"
    @submit="estimateSubmit">
    <el-container class="f-h-100 s-bg-white f-padding-12">
      <el-header class="f-h-auto f-padding-0">
        <div class="title">
          <i class="el-icon-warning"></i>
          <p class="sm">说明</p>
          <p>1、控制金额是系统根据出差人员的职务和出差地区，按费用类型自动生成</p>
          <p>2、预计金额为系统根据控制金额自动生成，可更改,但不可超过控制金额</p>
        </div>
      </el-header>
      <el-main style="margin-top: 12px; padding: 0;">
        <u-edit-table :columns="columns" 
          :tools="[]" 
          :data="tabData" 
          @rowEdit="rowEdit" />
      </el-main>
    </el-container>
  </u-dialog>
</template>
<script>
export default {
  props:{
    
  },
  data(){
    return{
      dialogShow:false,
    
      columns:[
        {label:'费用类型', width: 150, key:'ms'},
        {label:'控制金额（元）', minWidth: 150, ctype: 'money', key: 'bz', align:'right'},
        {label:'预计金额（元）',minWidth: 120, key:'name', ctype:'money', align:'right'},
      ],
      tabData:[
        {ms:'小计', noEdits: ['ms', 'bz', 'name'] },
        {ms:'伙食补助',bz:"3000", name: 15000, noEdits: ['ms', 'bz'] },
        {ms:'公杂费',bz:"3000", name:15000, noEdits: ['ms', 'bz']  },
        {ms:'住宿费',bz:"3000", name:15000, noEdits: ['ms', 'bz']  },
        {ms:'交通费',bz:"3000", name:15000, noEdits: ['ms', 'bz']  },
        {ms:'培训费',bz:"3000", name:15000, noEdits: ['ms', 'bz']  },
        {ms:'其它费用',bz:"3000", name:15000, noEdits: ['ms', 'bz']  },
      ]
    }
  },
  mounted(){
  },
  methods:{
    // 提交
    estimateSubmit() {},

    // 弹窗关闭
    dialogClose(){
      this.tabData
      
    },
    openDialog(){
        this.$emit('open')
    },
    
        // 行编辑元素的点击
    rowEdit(type, row, rowIndex) {
      // 新增
      if(type == 1) {
        this.tabData.splice(rowIndex, 1, {...row, noEdits: []} )
      }
      // 保存
      else if(type == 2) {
        this.tabData.splice(rowIndex, 1, {...row, noEdits: this.columns.map(item1 => item1.key || '')} )
      }
    },
     
       
    },
    watch: {
        show: {
            handler: function(val) {
                this.dialogShow = val;
            },
            immediate: true
        }
    }

}
</script>
<style>

</style>

<style lang="scss">
.u-ccfyPeople-dialog{
    height: 770px;
    .el-dialog__body{
        height: calc(100% - 40px - 70px);
    }
     .el-dialog__header{
        height: 60px;
        border-bottom: 1px solid #D8D8D8;
     }
     .el-dialog__close{
     font-size: 22px;
     }
     .title{
      background: #E7EEFF;
      padding: 14px 24px 24px 36px;
      position: relative;
      border-radius: 8px 8px 8px 8px;
      opacity: 1;
      .sm{
        font-size: 16px;
        font-family: Nunito-Regular, Nunito;
        font-weight: 400;
        color: #333333;
    }
      p{
        height: 26px;
        line-height: 26px;
        padding-left: 14px;
      }
      .el-icon-warning{
        position: absolute;
        top: 18px;
        left: 24px;
      }
      .el-icon-warning:before{
        font-size: 18px;
        color: #409EFF;
      }
     }
     .body{
        height: calc(100% - 60px - 32px);
     }
     .dialog-footer{
        text-align: center;
     }
    
}
</style>

